<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import useECharts from '@/hooks/useECharts';
  import * as echarts from 'echarts';
  import { useIntervalFn } from '@vueuse/core';
  import ScrollTable from './scroll-table.vue';

  const columns = [
    {
      title: '长者姓名',
      dataIndex: 'name',
    },
    {
      title: '性别',
      dataIndex: 'gender',
    },
    {
      title: '年龄',
      dataIndex: 'age',
    },
    {
      title: '所在村镇',
      dataIndex: 'address',
    },
    {
      title: '评级',
      dataIndex: 'rate',
    },
  ];

  /**

   */

  const tableData = [
    { name: '沈启兰', gender: '女', age: 94, address: '王家泉村', rate: 'I级' },
    { name: '李成信', gender: '男', age: 91, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '赵德花', gender: '女', age: 90, address: '王家泉村', rate: 'Ⅲ级' },
    { name: '陈启法', gender: '男', age: 89, address: '王家泉村', rate: 'I级' },
    { name: '李克风', gender: '女', age: 86, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '李同英', gender: '女', age: 86, address: '王家泉村', rate: 'I级' },
    { name: '陈学文', gender: '男', age: 79, address: '王家泉村', rate: 'Ⅲ级' },
    { name: '邢增全', gender: '男', age: 74, address: '王家泉村', rate: 'Ⅲ级' },
    { name: '王德叶', gender: '女', age: 73, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '李成田', gender: '男', age: 73, address: '王家泉村', rate: 'I级' },
    { name: '宋以香', gender: '女', age: 71, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '王志成', gender: '男', age: 71, address: '王家泉村', rate: 'I级' },
    { name: '李可英', gender: '男', age: 95, address: '王家泉村', rate: 'Ⅲ级' },
    { name: '宋明爱', gender: '女', age: 92, address: '王家泉村', rate: 'I级' },
    { name: '赵广英', gender: '女', age: 91, address: '王家泉村', rate: 'I级' },
    { name: '陈启莲', gender: '女', age: 89, address: '王家泉村', rate: 'Ⅲ级' },
    { name: '宋淑善', gender: '男', age: 88, address: '王家泉村', rate: 'I级' },
    { name: '李可香', gender: '女', age: 88, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '王建柱', gender: '男', age: 87, address: '王家泉村', rate: 'I级' },
    { name: '陈复全', gender: '男', age: 87, address: '王家泉村', rate: 'I级' },
    { name: '王建莲', gender: '女', age: 86, address: '王家泉村', rate: 'Ⅲ级' },
    { name: '陶开花', gender: '女', age: 86, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '宋传德', gender: '男', age: 85, address: '王家泉村', rate: 'I级' },
    { name: '王志英', gender: '女', age: 84, address: '王家泉村', rate: 'I级' },
    { name: '李同爱', gender: '女', age: 84, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '宋传花', gender: '女', age: 84, address: '王家泉村', rate: 'I级' },
    { name: '谢秀花', gender: '女', age: 83, address: '王家泉村', rate: 'I级' },
    { name: '李成业', gender: '男', age: 83, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '颜世英', gender: '女', age: 82, address: '王家泉村', rate: 'I级' },
    { name: '宋传新', gender: '女', age: 81, address: '王家泉村', rate: 'Ⅲ级' },
    { name: '刘洪美', gender: '女', age: 81, address: '王家泉村', rate: 'I级' },
    { name: '蔡云祥', gender: '男', age: 80, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '沈怀美', gender: '女', age: 80, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '蔡云香', gender: '女', age: 80, address: '王家泉村', rate: 'I级' },
    { name: '杨自美', gender: '女', age: 80, address: '王家泉村', rate: 'I级' },
    { name: '徐信堂', gender: '女', age: 80, address: '王家泉村', rate: 'I级' },
    { name: '韩祥成', gender: '男', age: 80, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '宋爱凤', gender: '女', age: 79, address: '王家泉村', rate: 'I级' },
    { name: '李崇坤', gender: '男', age: 79, address: '王家泉村', rate: 'Ⅲ级' },
    { name: '沈照花', gender: '女', age: 79, address: '王家泉村', rate: 'I级' },
    { name: '王仕兰', gender: '女', age: 79, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '陈长利', gender: '男', age: 79, address: '王家泉村', rate: 'I级' },
    { name: '任明花', gender: '女', age: 79, address: '王家泉村', rate: 'I级' },
    { name: '宋恒花', gender: '女', age: 79, address: '王家泉村', rate: 'I级' },
    { name: '宋恒凤', gender: '女', age: 79, address: '王家泉村', rate: 'I级' },
    { name: '陈奉香', gender: '女', age: 79, address: '王家泉村', rate: 'I级' },
    { name: '尚现春', gender: '男', age: 79, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '韩祥进', gender: '男', age: 78, address: '王家泉村', rate: 'I级' },
    { name: '宋恒花', gender: '女', age: 78, address: '王家泉村', rate: 'I级' },
    { name: '沈学花', gender: '女', age: 78, address: '王家泉村', rate: 'I级' },
    { name: '任清美', gender: '女', age: 78, address: '王家泉村', rate: 'Ⅲ级' },
    { name: '陈明运', gender: '女', age: 78, address: '王家泉村', rate: 'I级' },
    { name: '蔡云祯', gender: '男', age: 77, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '宋传美', gender: '女', age: 77, address: '王家泉村', rate: 'I级' },
    { name: '徐爱文', gender: '男', age: 77, address: '王家泉村', rate: 'I级' },
    { name: '宋恒爱', gender: '女', age: 77, address: '王家泉村', rate: 'I级' },
    { name: '陈复彬', gender: '男', age: 77, address: '王家泉村', rate: 'Ⅱ级' },
    { name: '王香英', gender: '女', age: 77, address: '王家泉村', rate: 'I级' },
  ];

  const pieChart1Option = {
    legend: {
      icon: 'circle',
      type: 'scroll',
      orient: 'vertical',
      left: '65%',
      align: 'left',
      top: 'middle',
      textStyle: {
        color: '#8C8C8C',
      },
    },
    grid: {
      left: '0%',
      right: '4%',
      bottom: '0%',
      top: '3%',
      containLabel: true,
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '80%',
        center: ['40%', '50%'],
        data: [
          { value: 57, name: '男' },
          { value: 66, name: '女' },
        ],
        itemStyle: {
          color: (list: any) => {
            const colorList = [
              {
                l: 1,
                b: 0,
                r: 0,
                t: 0,
                colorStart: '#0dbbf1',
                colorEnd: '#1189e8',
              },
              {
                l: 1,
                b: 0,
                r: 0,
                t: 0,
                colorStart: '#f0bec4',
                colorEnd: '#ec8692',
              },
            ];
            return new echarts.graphic.LinearGradient(
              colorList[list.dataIndex].l,
              colorList[list.dataIndex].b,
              colorList[list.dataIndex].r,
              colorList[list.dataIndex].t,
              [
                {
                  offset: 0,
                  color: colorList[list.dataIndex].colorStart,
                },
                {
                  offset: 1,
                  color: colorList[list.dataIndex].colorEnd,
                },
              ]
            );
          },
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      },
    ],
  };

  const data = [
    { name: 'Ⅰ级', value: 69 },
    { name: 'Ⅱ级', value: 32 },
    { name: 'Ⅲ级', value: 22 },
  ];
  const color2 = [
    'rgba(17, 141, 246, .2)',
    'rgba(247, 198, 124, .2)',
    'rgba(97, 216, 215, .2)',
  ];
  const maxCircleData = data.map((item, index) => {
    return {
      ...item,
      itemStyle: {
        color: color2[index],
      },
    };
  });

  const pieChartOption2 = {
    legend: {
      icon: 'circle',
      type: 'scroll',
      orient: 'vertical',
      left: '60%',
      align: 'left',
      top: 'middle',
      textStyle: {
        color: '#8C8C8C',
      },
    },
    color: [
      'rgba(17, 141, 246, 1)',
      'rgba(247, 198, 124, 1)',
      'rgba(97, 216, 215, 1)',
    ],
    series: [
      {
        type: 'pie',
        padAngle: 2,
        radius: ['48%', '75%'],
        center: ['40%', '50%'],

        label: {
          show: false,
        },
        emphasis: {
          disabled: true,
        },
        labelLine: {
          show: false,
          length: 6,
          length2: 6,
          minTurnAngle: 30,
        },
        itemStyle: {
          color: 'green',
        },
        data: maxCircleData,
      },
      {
        type: 'pie',
        padAngle: 2,
        radius: ['62%', '75%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data,
      },
    ],
  };

  const lineChartOption1 = {
    tooltip: {},
    legend: {
      show: true,
      icon: 'circle',
      top: '4px',
      right: '4px',
      textStyle: {
        color: '#f5f5f5',
      },
    },
    grid: {
      left: '0%',
      right: '3%',
      bottom: '3%',
      top: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['70以下', '71-75', '76-80', '81-85', '86-90', '91-95', '96以上'],
      axisLine: {
        show: true,
      },
      axisLabel: {
        textStyle: {
          color: '#f5f5f5',
        },
        rotate: '-60',
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      show: false,
      type: 'value',
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: '男',
        type: 'bar',
        stack: 'account',
        barWidth: 20,
        label: {
          show: true,
          position: 'inside',
          formatter: '{c}',
          color: '#fff',
          fontSize: 10,
        },
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#017ebb',
              },
              {
                offset: 1,
                color: '#06fbfe',
              },
            ],
          },
        },
        data: [3, 30, 16, 2, 4, 2, 0],
      },
      {
        name: '女',
        type: 'bar',
        stack: 'account',
        label: {
          show: true,
          position: 'inside',
          formatter: '{c}',
          color: '#fff',
          fontSize: 10,
        },
        barWidth: 20,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#ffae88' },
            { offset: 1, color: '#ff7388' },
          ]),
        },
        data: [2, 26, 21, 7, 7, 3, 0],
      },
    ],
  };

  const lineChartOption2 = {
    title: {
      text: '',
      subtext: '',
    },
    grid: {
      left: '2%',
      right: '0%',
      bottom: '0%',
      top: '12%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      icon: 'circle',
      show: true,
      top: '4px',
      right: '4px',
      textStyle: {
        color: '#f5f5f5',
      },
    },
    yAxis: {
      type: 'category',
      data: ['2025年度'],
      axisLabel: {
        textStyle: {
          color: '#f5f5f5',
        },
      },
      axisTick: {
        show: false,
      },
    },
    xAxis: {
      show: false,
      type: 'value',
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: 'Ⅲ级',
        type: 'bar',
        barWidth: 26,
        stack: '数量',
        data: [22],
        label: {
          show: true,
          position: 'inside',
          formatter: '{c}',
          color: '#fff',
          fontSize: 10,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: 'rgba(71, 33, 202, 0.2)',
              },
              {
                offset: 1,
                color: 'rgba(134, 81, 244, 0.2)',
              },
            ]),
          },
        },
      },
      {
        name: 'Ⅱ级',
        type: 'bar',
        barWidth: 16,
        stack: '数量',
        data: [32],
        label: {
          show: true,
          position: 'inside',
          formatter: '{c}',
          color: '#fff',
          fontSize: 10,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 1,
                color: 'rgba(67, 102,243, 0.2)',
              },
              {
                offset: 0,
                color: 'rgba(29, 67, 243, 0.2)',
              },
            ]),
          },
        },
      },
      {
        name: 'Ⅰ级',
        type: 'bar',
        barWidth: 16,
        stack: '数量',
        data: [69],
        label: {
          show: true,
          position: 'inside',
          formatter: '{c}',
          color: '#fff',
          fontSize: 10,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: 'rgba(56, 160, 214, 0.2)',
              },
              {
                offset: 1,
                color: 'rgba(109, 205, 230, 0.2)',
              },
            ]),
          },
        },
      },
    ],
  };

  const pieChart1Dom = ref();
  const pieChart2Dom = ref();
  const lineChart1Dom = ref();
  const lineChart2Dom = ref();

  const { setOptions: setOptions1 } = useECharts(pieChart1Dom);
  const { setOptions: setOptions2 } = useECharts(pieChart2Dom);
  const { setOptions: setLineOptions1 } = useECharts(lineChart1Dom);
  const { setOptions: setLineOptions2 } = useECharts(lineChart2Dom);

  useIntervalFn(() => {
    // @ts-ignore
    setOptions1(pieChart1Option);
    // @ts-ignore
    setOptions2(pieChartOption2);
    // @ts-ignore
    setLineOptions1(lineChartOption1);
    // @ts-ignore
    setLineOptions2(lineChartOption2);
  }, 5000);

  onMounted(() => {
    // @ts-ignore
    setOptions1(pieChart1Option);
    // @ts-ignore
    setOptions2(pieChartOption2);
    // @ts-ignore
    setLineOptions1(lineChartOption1);
    // @ts-ignore
    setLineOptions2(lineChartOption2);
  });
</script>

<template>
  <div class="flex flex-col w-full">
    <span class="big-title"> 长者概况 </span>

    <div class="flex w-full">
      <div class="flex flex-col w-[50%]">
        <span class="mid-title">长者性别</span>
        <div ref="pieChart1Dom" class="w-full h-[100px]"></div>
      </div>
      <div class="flex flex-col w-[50%]">
        <span class="mid-title">级别分布</span>
        <div ref="pieChart2Dom" class="w-full h-[100px]"></div>
      </div>
    </div>

    <div class="flex flex-col w-full">
      <span class="mid-title">年龄分布</span>
      <div ref="lineChart1Dom" class="w-full h-[200px]"></div>
    </div>

    <div class="flex flex-col w-full">
      <span class="mid-title">年度数据对比</span>
      <div ref="lineChart2Dom" class="w-full h-[100px]"></div>
    </div>

    <div class="flex flex-col w-full">
      <span class="mid-title">已守护长者数据</span>
      <div class="w-full h-[100px] mt-2">
        <ScrollTable
          size="small"
          :columns="columns"
          :data="tableData"
          :height="400"
        />
      </div>
    </div>
  </div>
</template>

<style lang="less"></style>
